<template>
  <div class="tomMenu">
    <i-menu mode="horizontal" :theme="theme" active-name="1">
      <MenuItem name="1111" to="/">
        首页
      </MenuItem>

      <span v-for="v in menuContent">

        <Submenu v-if="v['children'].length > 0" :name="v['categoryID']">
          <template slot="title">
              <MenuItem :to="'/list?id='+v['categoryID']" :name="v['categoryID']+'-1'">
                {{ v['name'] }}
              </MenuItem>
          </template>
            <MenuItem v-for="m in v['children']" :name="v['categoryID']+'-'+m['categoryID']" :to="'/list?id='+m['categoryID']">{{ m['name'] }}</MenuItem>
        </Submenu>

        <MenuItem v-else :name="v['categoryID']" :to="'/list?id='+v['categoryID']">
          <span >{{ v['name'] }}</span>
        </MenuItem>

      </span>

      <MenuItem name="2222" to="/about">
        关于
      </MenuItem>

    </i-menu>
  </div>
</template>

<script>
  import {category} from "../lib/interface";

  export default {
    name: 'topMenu',
    data () {
        return {
            theme: 'dark',
            menuContent: []
        }
    },
    mounted() {
        this.getMenu();
    },
    methods: {
        async getMenu(){
            let result = await category();
            this.menuContent = result.data;
        }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
